<div class="box">

<div id="popUpItem" onclick="closeItem()" style="top: 20%; z-index: 11; position:fixed;" ></div>
<div id="darkBack" onclick="closeBack()" style="top: 0px; left: 0px; width: 100%; background-color: rgb(0, 0, 0); position: fixed; z-index: 10;" ></div>
    
    <div class="title">
        <h5>Merchandising</h5>
    </div>
        <!-- end box / title -->
        
        
        <?php if($proses=="add" || $proses=="update"){?>
        <?php
        #### tampilkan alert jika terdapat kesalahan dalam memasukkan data
                $salah = validation_errors();
                if($salah <> ""){
                        echo'<div id="box-messages">
                                <div class="messages">
                                        <div id="message-error" class="message message-error">
                                                <div class="image">
                                                        <img src="'. base_url() .'file/shell/smooth/resources/images/icons/error.png" alt="Error" height="32" />
                                                </div>
                                                <div class="text">
                                                        <h6>Terdapat kesalahan dalam memasukkan data:</h6>
                                                        <span>'. validation_errors() .'</span>
                                                </div>
                                                <div class="dismiss">
                                                        <a href="#message-error"></a>
                                                </div>
                                        </div>
                                </div>
                        </div>';
                }
        ?>
        
                
        <?php } ?>
        
        <?php
        $msg = $this->session->flashdata('message');
        if($msg <> ""){
              echo'<div id="box-messages">
                        <div class="messages">
                                <div id="message-success" class="message message-success">
                                        <div class="image">
                                                <img src="'. base_url() .'file/shell/smooth/resources/images/icons/success.png" alt="Success" height="32" />
                                        </div>
                                        <div class="text">
                                                <h6>'. $msg .'</h6>
                                        </div>
                                        <div class="dismiss">
                                                <a href="#message-success"></a>
                                        </div>
                                </div>
                        </div>
                </div>';
        }
        ?>       
        
<div class="data_table_mang">

    <ul>
        <li><a href="#tabs-1">Outlet</a></li>
        <li><a href="#tabs-2">Etalase</a></li>
        <li><a href="#tabs-3">Billboard</a></li>
    </ul>
    <div id="tabs-1">
        <p><?php $this->load->view('grid-merchandising-outlet'); ?></p>
    </div>
    <div id="tabs-2">
        <p><?php $this->load->view('grid-merchandising-etalase'); ?></p>
    </div>
    <div id="tabs-3">
        <p><?php $this->load->view('grid-merchandising-billboard'); ?></p>
    </div>

                <?php
                //echo $userGroupId['user_group_id'];
                //if($userGroupId['user_group_id'] == 4 || $userGroupId['user_group_id'] == 5){
                        // $this->load->view('grid-merchandising-outlet');
                //}else{
                       // $this->load->view('grid-merchandising-view2');//echo'<iframe src="'.base_url().'index.php/territory/territory_iframe/chart" width=100% height=600px>';
                //}
                ?>      
</div>

</div>

<script type="text/javascript">
    $(function() {
        $( ".data_table_mang" ).tabs();
    });


function popUp(urlImg)
{
    var wrapperHeight = $('#content').height();
    $('#darkBack').css({'height': ($(document).height())+'px'});
    var urlBase = '<?php echo base_url()?>';
    $("#darkBack").css({"opacity" : "0.7"})
        .fadeIn("slow");
    
    $("#popUpItem").css({"opacity" : "1"})
        .fadeIn("slow");    
        
    //$("#popUpItem").html("<img src='"+urlBase+"file/uploads/"+urlImg+"' width='400px'/>")
    $("#popUpItem").html("<img src='"+urlBase+urlImg+"' width='400px'/>")
                   .center()
                   .fadeIn("slow");
    //alert(wrapperHeight);
}
function closeBack()
{
    $("#darkBack").fadeOut("slow");
    $("#popUpItem").fadeOut("slow");
}

function closeItem()
{
    $("#darkBack").fadeOut("slow");
    $("#popUpItem").fadeOut("slow");
}


$(document).keypress(function(e){
    if(e.keyCode==27){
        $("#darkBack").fadeOut("slow"); 
        $("#popUpItem").fadeOut("slow");   
    }
});

jQuery.fn.center = function () {
        // this.css("position","absolute");
        // this.css("top", ( $(window).height() - this.height() ) / 2+$(window).scrollTop() + "px");
        this.css("left", ( $(window).width() - this.width() ) / 2+$(window).scrollLeft() + "px");
        return this;
    }
</script>